<template>
        <div class="home">
            <div class="qrCode box">
                <div class="f1">
                    {{qrcode}}
                </div>
                <div class="bind-btn box v-center" id="scan" @click="iconClick">
                    <div class="icon-scan v-center mar-r05"></div>
                    <div>绑定已有二维码</div>
                </div>
            </div>
                <ShowList :entryData="entryData" @showList="showList"></ShowList>
            <ShowListInput :needData="needData" :placeholder="placeholder"  @inputChange="inputChange" :inputValue="inputValue"></ShowListInput>
            <tips  v-for="(tips,index) of tipsData" :key="index" :tips="tips"></tips>
            <com-button btnClass="next-btn"
                        @btn-click="goTo"
                        :disabled="nextBtnDisabled"
            >下一步</com-button>
            <Popup :popupVisible="popupVisible"  @change='change'>
                <picker @cancel="cancel"  :ChooseName="ChooseName" :slotData="slotData" @companyName="companyName"></picker>
            </Popup>
        </div>
</template>

<script>
    // @ is an alias to /src
    import MyButton from '@/components/MyButton.vue'
    import ShowList from '@/components/ShowList.vue'
    import tips from '@/components/tips.vue'
    import ShowListInput from '@/components/ShowListInput.vue'
    import Popup from '@/components/Popup.vue'
    import picker from '@/components/picker.vue'
    import ComButton from '@/components/com-button.vue'
    import { mapState,mapMutations } from 'vuex'
    import { Toast } from 'mint-ui';
    import { HOME_NEXT_BUTTON_CHECK,HOME_SELECT_CHANGE,HOME_SELECT_CANCEL,HOME_GET_INPUT_VALUE,HOME_SHOW_SELECT_LIST } from '../store/types'
    import router from '@/router'
    export default {
        name: 'home',
        components: {
            MyButton,
            ShowList,
            tips,
            ShowListInput,
            Popup,
            picker,
            ComButton
        },
        data() {
            return {
                ButtonNext: '下一步',
                qrcode: '已有二维码请绑定',
                needData:'推荐人',
                placeholder:"请输入推荐人ID(选填)",

            }
        },
        computed: {
            ...mapState('home',['OppName','popupVisible','ChooseName',
                        'entryData','tipsData','slotData','inputValue','disabled',
                'nextBtnDisabled'])
        },
        methods:{
            ...mapMutations('home',['getSelectValue',HOME_SHOW_SELECT_LIST, HOME_SELECT_CANCEL,HOME_GET_INPUT_VALUE,HOME_SELECT_CHANGE,'changeDisabled',
                HOME_NEXT_BUTTON_CHECK]),
            iconClick(){
                Toast('暂未开通二维码服务')
            },
            showList (value) {
                this.HOME_SHOW_SELECT_LIST(value)
            },
            cancel() {
                this.HOME_SELECT_CANCEL()

            },
            change(){
                this.HOME_SELECT_CHANGE()

            },
            companyName(value){
                if(this.OppName=="mechanism"){
                    this.entryData[0].choose=value.join("-")
                    this.HOME_NEXT_BUTTON_CHECK()
                }else if(this.OppName=="department"){
                    this.entryData[1].choose=value.join("-")
                }
            },
            inputChange(value){
                this.HOME_GET_INPUT_VALUE(value)
            },

            goTo(){
                if(this.entryData[0].choose==""){
                    Toast('请填入必填项')
                    return false
                }
                router.push( 'LegalPersonPhoto' )
            }
        },
        watch:{
            companyName:function () {
            console.log(2)
           }

        }
    }

</script>
<style scoped>
    .qrCode {
        height: 3.75rem;
        line-height: 3.75rem;
        background-color: #fff;
        color: #80898d;
        font-size: .9375rem;
        padding-left: .9375rem;
        padding-right: .9375rem;
        text-align: left;
        margin-bottom: .5rem;
    }
    .bind-btn {
        height: 2rem;
        line-height: 2rem;
        color: #2dbbfd;
        font-size: .875rem;
        border-radius: .3125rem;
        border: 1px solid #2dbbfd;
        padding-left: .875rem;
        padding-right: .875rem;
    }
    .v-center {
        margin: auto 0
    }
    .icon-scan {
        background-image: url(../assets/images/icon-scan.png);
        height: .875rem;
        width: .875rem;
        background-size: 100% 100%
    }
    .mar-r05 {
        margin-right: .5rem
    }
    .f1 {
        -moz-box-flex: 1;
        -webkit-flex: 1;
        flex: 1
    }
    .box {
        display: -webkit-flex;
        display: flex;
        flex-flow: row
    }
</style>
